<template>
  <div class="box-item relative">
    <div v-if="nodeData?.level" class="water" :style="{'--c':nodeData?.color,height:`${height}%`}">
      <div class="line absolute bottom-full">
        {{ device?.currentAltitude }}cm
      </div>
    </div>
    <div v-if="nodeData?.radiation" class="top-text">
      <div class="right">
        <svg t="1701081243212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="7047" width="32" height="32">
          <path
            d="M511.5 223C352.4 223 223 352.4 223 511.5S352.4 800 511.5 800 800 670.6 800 511.5 670.6 223 511.5 223z m0 553.9c-146.4 0-265.4-119.1-265.4-265.4s119.1-265.4 265.4-265.4 265.4 119.1 265.4 265.4-119 265.4-265.4 265.4z"
            p-id="7048" fill="#2980ba"></path>
          <path
            d="M508.5 435.6c11.6 0 25.6 4.6 38 10.9l72-134.9c-34.8-21.7-71.3-33.3-110-33.3s-75.1 11.6-110 33.3l78.2 134.9c12.5-6.2 20.2-10.9 31.8-10.9z m-60.4 116.3c-5.4-10.1-7.7-24.8-8.5-38.8H287c-3.1 41.1 3.9 78.3 22.5 113.2 17.8 34.1 44.9 60.5 80.5 81.4l82.9-132.6c-11.6-7.7-19.4-12.3-24.8-23.2z m288.1-38.7H583.6c-0.8 13.9-3.1 28.7-8.5 38.8-5.4 10.9-13.2 15.5-24.8 23.3l82.9 132.6c35.6-20.9 62.7-47.3 80.5-81.4 18.6-35 25.6-72.3 22.5-113.3z m-224.6-39.6c-20.9 0-37.2 16.3-37.2 37.2 0 20.9 16.3 37.2 37.2 37.2 20.9 0 37.2-16.3 37.2-37.2 0-20.9-16.3-37.2-37.2-37.2z"
            p-id="7049" fill="#2980ba"></path>
        </svg>
        <span>  {{ device?.b1 }}bq/L</span>
      </div>
    </div>
    <div v-if="nodeData?.decayTime && device?.effectiveTime" class="absolute w-full text-xl text-center text-gray-600 top-1/2 left-0">
      <span>已衰变 {{ days }}</span>
    </div>
<!--    <div class="p-2 text-xs box-border w-full absolute left-0 top-12 text-right text-gray-600">已衰变 {{ decayTime }} 天</div>-->
    <span class="text" :style="{color:nodeData?.fontColor}">{{ device?.equipmentName }}</span>
    <div class="valve-item left-valve z-9999 hover:cursor-pointer" v-if="nodeData?.leftValve">
      <img :src="imageList[parseInt(device?.inletValve)-1]" alt=""
           @click="handleControl(1,device?.inletValve)">
    </div>
    <div class="valve-item right-valve z-9999 hover:cursor-pointer" v-if="nodeData?.rightValve">
      <img :src="imageList[parseInt(device?.outletValve)-1]" alt=""
           @click="handleControl(2,device?.outletValve)">
    </div>
    <el-dialog title="编辑池" :model-value="isRevealed" show-close append-to-body @close="handleClose">
      <el-form :model="formData" label-width="auto" label-position="left">
        <el-form-item label="设备类型">
          <el-select v-model="formData.type">
            <el-option :value="EQUIPMENT_TYPE.PRECIPITATE_POOL" label="沉淀池"></el-option>
            <el-option :value="EQUIPMENT_TYPE.DECAY_POOL" label="衰变池"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-select v-model="formData.index">
            <el-option v-for="(item,index) in formData.type===EQUIPMENT_TYPE.PRECIPITATE_POOL?precipitatePool:decayPool"
                       :key="item.id as number"
                       :value="index" :label="item.equipmentName as string">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="颜色">
          <el-color-picker v-model="formData.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="formData.fontColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="左阀门">
          <el-switch v-model="formData.leftValve" :active-value="true" :inactive-value="false"></el-switch>
        </el-form-item>
        <el-form-item label="右阀门">
          <el-switch v-model="formData.rightValve" :active-value="true" :inactive-value="false"></el-switch>
        </el-form-item>
        <el-form-item label="显示液位">
          <el-switch v-model="formData.level" :active-value="true" :inactive-value="false"></el-switch>
        </el-form-item>
        <el-form-item label="显示辐射值">
          <el-switch v-model="formData.radiation" :active-value="true" :inactive-value="false"></el-switch>
        </el-form-item>
        <el-form-item label="显示衰变时间">
          <el-switch v-model="formData.decayTime" :active-value="true" :inactive-value="false"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
        <el-button type="info" @click="handleClose">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import { computed, inject, ref, watch } from 'vue'
import { type Graph, Node } from '@antv/x6'
import { useConfirmDialog } from '@vueuse/core'
import { useDeviceData } from '@/stores/useWebSocket'
import { storeToRefs } from 'pinia'
import {
  dayjs,
  ElButton,
  ElColorPicker,
  ElDialog,
  ElForm,
  ElFormItem,
  ElOption,
  ElSelect,
  ElSwitch
} from 'element-plus'
import duration from 'dayjs/plugin/duration'
import { handleEdgeAnnotation } from '@/utils/x6/animation'
import { EQUIPMENT_TYPE } from '@/utils/enums'

const imageList = Object.values(import.meta.glob('@/assets/home/valve*.png',{eager:true,import:'default'}))

const { precipitatePool, decayPool } = storeToRefs(useDeviceData())

dayjs.extend(duration)

const getNode = inject('getNode') as () => Node
const getGraph = inject('getGraph') as () => Graph

const node = getNode()
const graph = getGraph()

const nodeData = ref(node.getData() || {})

const { isRevealed, confirm, reveal, cancel, onConfirm, onReveal } = useConfirmDialog()
node.setData({
  dialog: false
}, {
  silent: true
})
node.on('change:data', ({ current }) => {
  reveal(current)
})
node.setZIndex(99)

const formData = ref<{
  index?: number
  type?: number
  color?: string,
  leftValve?: boolean,
  rightValve?: boolean,
  level?: boolean,
  radiation?: boolean,
  fontColor?: string,
  decayTime?: boolean
}>(node.getData())

onReveal((data) => {
  formData.value = data
})

onConfirm((data) => {
  nodeData.value = data
  node.setData(data, { silent: true })
})

const handleClose = function() {
  cancel()
  node.setData({
    dialog: false
  }, { silent: true })
}
const handleConfirm = function() {
  confirm(node.getData())
}

const { deviceList } = storeToRefs(useDeviceData())
const device = computed(() => {
  return deviceList.value.filter((item) => item.equipmentType === formData.value?.type)[formData.value?.index || 0]
})

const days = computed(() => {
  return dayjs.duration(dayjs().diff(dayjs(device.value?.effectiveTime as number), 'day'), 'day').asDays() + 1 + '天'
})
const height = computed(() => {
  return (device.value?.currentAltitude as number) / (device.value?.totDepth as number) * 100
})

const handleControl = function(direction: number, isOpen: number) {
  window.parent.postMessage({
    type: 'valve',
    data: {
      direction,
      eqId: device.value?.id,
      status: isOpen
    }
  }, '*')
}


const handleEdges = function(isOpen: boolean) {
  const edges = graph.getConnectedEdges(node, {
    outgoing: true
  })
  edges.forEach(edge => {
    handleEdgeAnnotation(edge, isOpen)
  })
}

watch(device, (d) => {
  if(!d)return
  handleEdges( d.outletValve === 1)
},{
  immediate:true
})

const decayTime = computed(() => dayjs.duration(dayjs(device.value?.effectiveTime as string).diff(dayjs(), 'days')).asDays())

</script>

<style scoped lang="scss">
.box-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 0 10px 0 rgba(46, 112, 236, 0.3);
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 10px 20px 20px;
  box-sizing: border-box;
}

.water {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  //border-top: 1px solid red;
  //outline: 2px dashed gray;
  --w1: radial-gradient(100% 57% at top, #0000 100%, var(--c) 100.5%) no-repeat;
  --w2: radial-gradient(100% 57% at bottom, var(--c) 100%, #0000 100.5%) no-repeat;
  background: var(--w1), var(--w2), var(--w1), var(--w2);
  background-position-x: -200%, -100%, 0%, 100%;
  background-position-y: 100%;
  background-size: 50.5% 100%;
  animation: m 1s infinite linear;

  .line {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: #999999;
    border-bottom: 2px dashed #999999;
    width: 40%;
  }
}

.text {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  color: #838383;
  z-index: 999;
  left: 0;
  top: -24px;
}

.top-text {
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  color: #2980ba;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;

  .right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

}


@keyframes m {
  0% {
    background-position-x: -200%, -100%, 0%, 100%;
  }
  100% {
    background-position-x: 0%, 100%, 200%, 300%;
  }
}

.valve-item {
  position: absolute;
  top: calc(50% - 44px);
  height: 58px;
  width: 40px;
}

.left-valve {
  left: -60px;
}

.right-valve {
  right: -60px;
}
</style>
